<style>
    .yhbj-form .el-form-item--small.el-form-item{
        margin-bottom: 10px !important;
    }
</style>
<template>
    <!-- 新增弹出框 -->
    <el-dialog v-bind:title="titleName" :visible="visible" :modal="true" width="30%" top="10vh"
               :show-close="true" :destroy-on-close="true" :before-close="handleDialogClose"
               :close-on-press-escape="false" :close-on-click-modal="false" @open="onLoad">
        <el-form ref="rulesForm" class="yhbj-form" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="性别" prop ="user_sex" style="margin-top:-10px;">
                <el-radio v-model="data.user_sex" label="1">男</el-radio>
                <el-radio v-model="data.user_sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="姓名" prop ="user_name" style="margin-top: -5px;">
                <el-input v-model="data.user_name" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="user_idcard" style="">
                <el-input v-model="data.user_idcard" placeholder="请填写身份证号"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="user_phone" style="">
                <el-input v-model="data.user_phone" placeholder="请填写联系电话"></el-input>
            </el-form-item>
            <el-form-item label="登录名" prop ="user_loginname" style="">
                <input v-model="data.user_loginname" style="position: fixed;bottom: -9999px;"/>
                <el-input v-model="data.user_loginname" autocomplete="off" placeholder="请填写登录名"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="user_password" style="">
                <input type="password" v-model="data.user_password" style="position: fixed;bottom: -9999px;"/>
                <el-input type="password" v-model="data.user_password" autocomplete="off" placeholder="请填写登录密码"></el-input>
            </el-form-item>
            <el-form-item label="组织机构" prop="fk_organ_pk" style="">
                <el-select v-model="data.fk_organ_pk" filterable :disabled="data.optTyle==='add'" placeholder="请选择组织机构" style="width: 100%">
                    <el-option v-for="item in dics.organs" :key="item.organ_pk" :label="item.organ_name" :value="item.organ_pk"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色名称" prop="fk_role_pk" style="">
                <el-select v-model="data.fk_role_pk" filterable collapse-tags clearable placeholder="请选择角色名称" style="width: 100%">
                    <el-option v-for="item in dics.roles" :key="item.role_pk" :label="item.role_name" :value="item.role_pk"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="close">关 闭</el-button>
                <el-button type="primary" @click="save('rulesForm')">保存并关闭</el-button>
                <el-button type="primary" v-if="data.optTyle==='add'" @click="save('rulesForm',true)">保存，继续添加</el-button>
            </span>
    </el-dialog>
</template>
<!--update by zhaodecang 2021-01-05 14:31:重新优化用户编辑-->
<script>
    export default {
        name: "edit",
        inject:['refresh'],
        props: {
            titleName: {type: String, default: '新增'},
            visible: {type:Boolean},
            data: {
                user_pk: '',
                user_name: '',
                user_sex: '',
                user_phone: '',
                user_idcard: '',
                user_loginname: '',
                user_password: '',
                user_intime: '',
                roles_name: '',
                user_status: '',
                fk_role_pk:'',
                optTyle: '',
                fk_organ_pk:'',
            },
        },
        data(){
            let checkIdCard = (rule, value, callback) => {
                if (value == null || value === '') {
                    return callback();
                }
                if (!this.$validateIdCard(value)) {
                    this.data.user_idcard = '';
                    return callback();
                }
                callback();
            };
            let checkPhone = (rule, value, callback) => {
                if (value == null || value === '') {
                    return callback();
                }
                if (!this.$validatePhone(value)) {
                    this.data.user_phone = '';
                    return callback();
                }
                callback();
            };
            return {
                readonly: false,
                selectorShow: true,
                treeZZJG:[],
                zzjgProps:{
                    children: 'children',
                    label: 'bsf001'
                },
                url_save: '/auth/user/save',
                url_edit: '/auth/user/update',
                url_role: '/auth/role/list',
                url_organ: '/auth/organ/list',
                dics:{},
                rules: {
                    // 要以数组形式展示
                    user_name: [{ required: true, message: " ", trigger: "focus" }],
                    user_sex: [{ required: true, message: " ", trigger: "focus" }],
                    user_loginname: [
                        { required: true, message: " ", trigger: "focus" },
                        { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "focus" }
                    ],
                    user_password: [
                        { required: true, message: " ", trigger: "focus" },
                        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "focus" }
                    ],
                    fk_role_pk: [
                        { required: true, message: " ", trigger: "focus" },
                    ],
                    user_idcard: [
                        {required: true, message:" ", trigger: "focus"},
                        {required: true, validator: checkIdCard, trigger: "blur"},
                    ],
                    user_phone: [
                        {required: true, message:" ", trigger: "focus"},
                        {required: true, validator: checkPhone, trigger: "blur"},
                    ],
                    fk_organ_pk: [{ required: true, message: " ", trigger: "focus" }],
                    user_status: [{ required: true, message: " ", trigger: "focus" }],
                    /*ext1: [{required: true, message: " ", trigger: "focus"}]*/
                }
            }
        },
        created() {
            //加载字典
            this.initDict();
        },
        methods:{
            onLoad() {
                this.initDict();
                if ("add" === this.data.optTyle) {//添加
                    // this.data.user_loginname = '';
                    // this.data.user_password = '';
                } else if ("edit" === this.data.optTyle) {//编辑
                    // this.data.ext1 = this.data.ext1.split(',');
                    this.data.fk_role_pk = this.data.fk_role_pk;
                }
            },
            /*初始化字典*/
            initDict() {
                this.dics.roles = this.getRoles();//角色
                //显示信息太多需要优化
                this.dics.organs = this.getOrgans();//机构信息
            },
            getRoles(){
                this.$post(this.url_role,{}).then(res => {
                    if(res){
                        this.dics.roles= res.data;
                    }
                })
            },
            getOrgans(){
                this.$post(this.url_organ,{organ_pk:this.data.fk_organ_pk}).then(res => {
                    if(res){
                        this.dics.organs= res.data;
                    }
                })
            },
            //关闭窗口方法
            close(){
                this.refresh();
            },
            //保存数据方法
            save(formName, flag) {
                /*判断是添加还是修改*/
                if (this.data.user_pk === '' || this.data.user_pk === undefined) {
                    this.url = this.url_save;
                } else {
                    this.url = this.url_edit;
                }
                this.data.sxbf04 = '1';
                // delete this.data.children;
                this.$formValidate(this.$refs[formName], valid => {
                    if (valid) {
                        this.$post(this.url,this.data,).then(res => {
                            this.$message({type : res.code, message: res.msg,});
                            if (res.code === "success") {
                                if (flag) {
                                    this.data.user_name = '';
                                    this.data.user_idcard = '';
                                    this.data.user_phone = '';
                                    this.data.user_loginname = '';
                                } else {
                                    this.close();
                                }
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //右上角关闭事件
            handleDialogClose(){
                this.close();
            },
        },
        computed: {
        }
    }
</script>
<style>
    .el-input--suffix .el-input__inner {
         padding-right: 98px; 
    }
</style>